<script setup>
import { reactive } from 'vue';
import dingdan from './component/dingdan.vue';
const title = reactive({
    title1: ['全部', '待付款', '待发货', '待评价']
})
</script>
<template>
    <div class="img">
        <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/pst622fjhl4o6afh732naqfa9vy6y78am502c0a75-2890-4b63-a5f1-e78da442f495"
            alt="">
    </div>
    <div class="divbox">
        <div class="gerendingdan">
            <h1>个人订单</h1>
        </div>
        <van-tabs v-model:active="active" animated>
            <van-tab v-for="(item, index) in title.title1" :title="item">
                <dingdan></dingdan>
                <dingdan></dingdan>
                <dingdan></dingdan>
                <dingdan></dingdan>
                <dingdan></dingdan>
            </van-tab>
        </van-tabs>
    </div>
</template>



<style lang="scss" scoped>
.dingdanquan {
    height: 170px;
    margin-top: 10px;
    border: 1px solid #F0F0F0;

}

.van-card {
    padding-bottom: .1 !important;
    border: 1px solid #F0F0F0;
}

.heji {
    // margin-top: 1%;
    color: #201a1a;
    background-color: #fff;
}

.van-card:not(:first-child) {
    margin-top: 0px !important;
}

.shangmian {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
    height: 40px;

    .bianhao {
        color: red;
        background-color: #fff;
        margin-left: 4%;
    }

    .bianhao1 {
        color: #201a1a;
        background-color: #fff;

    }
}

.gerendingdan {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.img {
    background-color: #fff;

    img {
        width: 100%;
        height: 100%;
    }
}

.divbox {

    padding: 0 30px;
    height: 100%;
    background-color: #fff;
}
</style>